<template>
    <TechModal class="tech-recharge-modal" v-model="showRechargeModal" title="充值到当前会员卡" @close="close">
        <MemberCard
            v-if="cardInfo"
            :name="cardInfo.gradeName"
            :balance="cardInfo.balance"
            :discount="cardInfo.disCount"
            :showTopUpLowerAmount="true"
            :topUpLowerAmount="cardInfo.grade.topUpLowerAmount"
            :haveIntegral="cardInfo.grade.integralEarnFlag"
            :isShopCard="cardInfo.businessTypes.indexOf('emall') > -1"
        />
        <div class="gift-content">
            <div class="recharge-gift-equation">
                <div class="equation-item">
                    <div class="tip">充值</div>
                    <div class="value">￥{{info.quota}}</div>
                </div>
                <div class="equation-link">+</div>
                <div class="equation-item">
                    <div class="tip">赠送</div>
                    <div class="value">￥{{info.amount}}</div>
                </div>
                <div class="equation-link">=</div>
                <div class="equation-item">
                    <div class="tip">到账</div>
                    <div class="value">￥{{info.quota + info.amount}}</div>
                </div>
            </div>
            <template v-if="info.coupons && info.coupons.length > 0">
                <div class="gift-list-title">赠送优惠券</div>
                <div class="recharge-gift-list">
                    <RechargeGiftItem
                        v-for="item in info.coupons"
                        :key="item.id"
                        :name="item.typeName"
                        :value="item.price"
                        :type="item.type"
                        :count="item.cnt"
                    />
                </div>
            </template>
        </div>
        <div v-if="rechargeProtocol" class="recharge-protocol-check">
            <Checkbox class="secret-checkbox" v-model="agreeState" @change="agreeChange">阅读并同意</Checkbox>
            <span class="deal" @click="openProtocol">[ 会员服务协议 ]</span>
        </div>
        <Button v-if="rechargeProtocol" class="tech-btn" type="danger" :disabled="!agreeState" size="large" @click="pay">立即支付￥{{info.quota}}</Button>
        <Button v-else class="tech-btn" type="danger" size="large" @click="pay">立即支付￥{{info.quota}}</Button>
    </TechModal>
</template>

<script>
import { Button, Checkbox } from 'vant';
import { mapState, mapActions } from 'vuex';
import { TechModal } from '@components/base';
import { getRechargeParam } from '@biztools/recharge';
import { autoRechargePayment } from '@common/environment';
import MemberCard from './MemberCard';
import RechargeGiftItem from './RechargeGiftItem';
import logger from '@common/logger';
import { thirdPayRechargeRedirectInfo } from '@common/pay/third';
import { Tip } from '@common/tip';
import { setBrandProtocolState, getBrandProtocolState } from '@common/storage';
export default {
    name: 'RechargeModal',
    components: {
        Button,
        Checkbox,
        TechModal,
        MemberCard,
        RechargeGiftItem,
    },
    computed: {
        ...mapState({
            rechargeProtocol: state => state.recharge.rechargeProtocol,
        }),
    },
    props: {
        info: {
            type: Object,
            default() {
                return {
                    amount: 0,
                    quota: 0,
                    coupons: [],
                };
            },
        },
        cardInfo: {
            type: Object,
            default() {
                return {
                    gradeName: '',
                    balance: 0,
                    disCount: 10,
                };
            },
        },
    },
    watch: {
        info(val, oldVal) {
            logger.info('充值数据改变', val);
            if (val) {
                this.amount = val.quota;
                this.giftAmount = val.amount;
            }
        },
    },
    async created() {
        await this.getRechargeProtocol();
        this.agreeState = getBrandProtocolState();
    },
    data() {
        return {
            showRechargeModal: false,
            amount: 0,
            giftAmount: 0,
            agreeState: false,
        };
    },
    methods: {
        ...mapActions([
            'createRechargeOrder',
            'createRechargePrepay',
            'refreshMemberInfo',
            'searchRechargeState',
            'refreshMemberInfo',
            'getRechargeProtocol',
        ]),
        show() {
            this.showRechargeModal = true;
        },
        close() {
            this.showRechargeModal = false;
        },
        async pay() {
            // 生成订单参数
            const param = getRechargeParam(this.$props.cardInfo, this.amount, this.giftAmount);
            logger.info('生成的支付订单参数为：', param);
            if (!param) {
                return;
            }
            // 创建支付订单
            const orderRes = await this.createRechargeOrder(param);
            // 判断是否是需要跳转盛付通
            if (orderRes.need_redirect) {
                // 需要跳转盛付通支付
                await thirdPayRechargeRedirectInfo(orderRes.order_number, orderRes.redirect_type);
                return;
            }
            // 获取预支付信息
            const prepayRes = await this.createRechargePrepay(orderRes.order_number);
            // 自动支付
            autoRechargePayment(prepayRes, orderRes.order_number, async () => {
                logger.success('支付成功回调函数');
                // 通知后台
                const flag = await this.searchRechargeState(orderRes.order_number);
                Tip(flag ? '充值成功' : '充值失败');
                if (flag) {
                    this.refreshMemberInfo();
                }
            });
            // 更新会员信息
            await this.refreshMemberInfo();
            this.close();
        },
        agreeChange(val) {
            setBrandProtocolState(val);
        },
        ensureProtocol(flag=true) {
            this.agreeState = flag;
        },
        openProtocol() {
            this.$emit('openProtocol');
        },
    },
};
</script>

<style lang="less">
.tech-recharge-modal {
    .tech-member-card {
        min-height: 90px;
        .p(@gap-md);
        .card-base-info {
            min-height: 44px;
        }
    }
    .gift-content {
        .m-t(@gap);
        border: 1px solid #DDC089;
        overflow: hidden;
        .p(@gap);
        .p-b(0);
        .m-b(@gap-lg);
        .border-radius();
        .recharge-gift-equation {
            .flex();
            .m-b(@gap);
            .equation-item {
                .flex-column-center();
                flex: 2;
                .tip {
                    .font-size-sm();
                    color: @red;
                }
                .value {
                    .font-size(22);
                    // font-weight: @font-weight-bold;
                }
            }
            .equation-link {
                flex: 1;
                // text-align: center;
                .flex-column();
                justify-content: flex-end;
                align-items: center;
                .font-size(24);
            }
        }
        .gift-list-title {
            width: 100%;
            .font-size-sm();
            color: @red;
            .t-c();
        }
        .recharge-gift-list {
            .scroll-y();
            max-height: 125px;
            .tech-recharge-gift-item {
                width: calc((100% - @gap * 2) / 3 - 2px);
                float: left;
                .m-r(@gap);
                .m-b(@gap);
                &:nth-child(3n) {
                    .m-r(0);
                }
            }
        }
    }
    // 充值协议样式
    .recharge-protocol-check {
        display: flex;
        width: 100%;
        .m-b(@gap);
        .font-size();
        .van-checkbox__icon,
        .van-icon {
            width: 16px;
            height: 16px;
        }
        .deal {
            color: #4A90E2;
            .m-l(@gap-sm);
        }
    }
}
</style>

